import React, { useState, useEffect } from 'react';
import { ScrollView, Text, View, StyleSheet } from 'react-native';
import {
  Button,
  Modal,
  Flex,
  Toast,
  List,
  SegmentedControl,
  SearchBar,
} from '@ant-design/react-native';
import ShipRequesterScan from './components/shipRequesterScan';
import InstructShipDetailPage from './instructShipDetailPage';
import InstructShipStore from './instructShipStore';

// 有指令发料页
const routeName = 'InstructShipPage';
function InstructShipPage({ navigation }) {
  const [selSegment, setSelSegment] = useState(0);
  const insStore = InstructShipStore.useStore();
  useEffect(() => {
    // 仅测试用
    insStore.loadWorkInstructs();
    insStore.searchByFuzzyContract();
  }, []);
  let listdata = insStore.workInstruct.list;
  if (selSegment !== 0) {
    listdata = insStore.contractInstruct.list;
  }
  const handleNavDetailPage = (instructInfo) => {
    navigation.navigate(InstructShipDetailPage.routeName, {
      showRequester: selSegment === 0,
      instructTitle: instructInfo.title,
      instructId: instructInfo.id,
    });
  };
  return (
    <>
      {selSegment === 0 ? (
        <ShipRequesterScan onScanned={insStore.loadWorkInstructs} />
      ) : (
        <SearchBar
          value={insStore.contractInstruct.search}
          placeholder="合同号/指令号"
          onCancel={() => insStore.setContract({ search: '' })}
          onChange={(val) => insStore.setContract({ search: val })}
          onSubmit={insStore.searchByFuzzyContract}
        />
      )}
      <ScrollView>
        <List renderHeader="发料指令列表">
          {listdata.map((ld) => (
            <List.Item key={ld.id} onPress={() => handleNavDetailPage(ld)}>
              {ld.title}
              <List.Item.Brief wrap={false}>{ld.desc}</List.Item.Brief>
            </List.Item>
          ))}
        </List>
      </ScrollView>
      <SegmentedControl
        values={['工作发料', '合同发料']}
        selectedIndex={selSegment}
        onChange={(ev) => {
          setSelSegment(ev.nativeEvent.selectedSegmentIndex);
        }}
        style={{ height: 40 }}
      />
    </>
  );
}

InstructShipPage.routeName = routeName;
InstructShipPage.permission = 'RNonInstructShip';
export default InstructShipPage;
